<template>
  <div :id="id">
    <a-steps :current="-1" labelPlacement="vertical" @change="change" size="small" class="sw-step">
      <a-step :status="stepIndex=='0'?'process':'finish'">
        <span slot="title" :class="{title:isActive=='active0',underline:isActive=='active0'}">填写申请人信息</span>
      </a-step>
      <a-step :status="stepIndex=='0'?'wait':stepIndex=='1'?'process':'finish'">
        <span slot="title" :class="{title:isActive=='active1',underline:isActive=='active1'}">选择管理车型品牌</span>
      </a-step>
      <a-step :status="stepIndex=='2'?'process':'wait'">
        <span slot="title" :class="{title:isActive=='active2',underline:isActive=='active2'}">提交申请</span>
      </a-step>
    </a-steps>
  </div>
</template>

<script>
  let id=0;
  export default{
    name: 'swSteps',
    components: {},
    props: {
      stepIndex:{
        type: Number,
        default: 0
      },
    },
    watch:{
      stepIndex:{
        handler(val){
          this.isActive=`active${val}`
        }
      }
    },
    data(){
      return {
        isActive:'active0',
        id: id
      }
    },
    created() {
      id ++;
      this.id = 'sw-steps-' + id;
    },
    mounted(){
    },
    methods:{
      change(cur) {
        this.$emit('changeStep',cur)
      }
    },
    deactivated(){
    }
  }
</script>
<style lang="less">
  @stepWidth:116px;
  .sw-step.ant-steps-label-vertical {
    .ant-steps-item-content {
      width: @stepWidth;
      //width: 116px;
    }
    &.ant-steps-small:not(.ant-steps-dot) .ant-steps-item-icon {
      margin-left: (@stepWidth - 24)/2;
    }
    .ant-steps-item-tail {
      margin-left: @stepWidth/2;
    }
  }
  .title{
    font-weight:bold;
    color:#147092
  }
  .underline{
    border-bottom:2px solid #147092;
    padding:0px 0px 10px 0px
  }
</style>